<template>
  <div >
    <div class="menu" v-show="menu" :class="menu?'wrapper':'wrapper1'">
        
        <form action="" class="form" :model="form" :rules="rules">
           <div class="user"> <label for="" > 昵 称 </label>
           <input type="text" class="username" v-model="form.username">
           </div>
           <div class="pas"><label for=""> 密 码 </label>
            <input type="text" class="password" v-model="form.password" @keydown.enter.native="getUser('form')"> 
           </div>
            <input type="button" class="login" value="登录"  @click="getUser('form')">
             <input type="button" class="regist" value="注册" >
        </form>
        </div>
    <span @click="isShow" :class="menu?'wrapper3':'wrapper2'" class="iconfont icon-shuangyoujiantou-
" id="im"></span>
  </div>
</template>
<script>
import {loginer} from "@/api"
import {register} from "@/api"
import { mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
   form:{
      username:"",
      password:""
   },
       rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  computed: {
    ...mapGetters(["menu"])
  },
 
  methods: {
    ...mapMutations(["setUserInfo"]),
    isShow() {
      this.$store.commit("showMenu", !this.menu);
      console.log(11);
      if(this.menu){
          console.log(-1,this.menu)
           document.getElementsByClassName("menu")[0].style.zIndex="990"
      }else{
          console.log(990)
          document.getElementsByClassName("menu")[0].style.zIndex="-2000"
         setInterval(()=>{
                document.getElementById("im")
         },2000)
      }
    },
    getUser(){
      if(this.form.password!=""&&this.form.username!=""){
              loginer(this.form).then(res=>{
            console.log(res)
            if(res.data.status==200){
              localStorage.setItem("token",res.data.token);
              this.$router.push("/")
              let userInfo={
                username:res.data.username,
                nickname:res.data.nickName
              }
              this.setUserInfo(userInfo);
              alert(`${this.form.username}您已经登录`)
             document.getElementsByClassName("menu")[0].style.zIndex="-2000"
               this.form.username=""
               this.form.password=""
            }
          })
      }else{
        alert("请输入用户名和密码")
      }
  
    },

  }
};
</script>
<style>
.menu>.form{
 width:100%;
 height: 300px;
 position: absolute;
 top:30px;
}
.user{
    margin-bottom:10px;
}
.pas{
    margin-bottom:10px
}
.login{
     margin-left:35px;
    margin-right:30px;
     /* padding: 10px 10px; */
}
.login .regist{
    padding: 10px 10px;
    text-align: center;

}
</style>
